import '../css/paramTableCard.less'
import {CCard} from '@/components/card'
import {IconImg} from '@/components/image'
import {ParamTable} from '@/components/table/paramTable'
import {CnBoldSpan, CnNormalSpan} from '@/components/text'
import {PropType} from 'vue'
import dayjs, {Dayjs} from 'dayjs'
// import {exportCheckData} from '@/api/singleParam'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import useModal from '@/hooks/modalHook'
import {baseUrl} from '@/libs/baseUrl'
import qs from 'qs'
import './paramTableCard.less'

export const ParamTableCard = defineComponent({
  props: {
    waterOverview: {
      type: Object as PropType<SingleParam.WaterOverview>,
      required: true
    },
    typeList: Array,
    currentType: String
  },
  emits: {
    dateRangeChange: (data: [Dayjs, Dayjs]): boolean => true
  },
  setup(props, {emit}) {
    const {route} = useGlobalAPI()
    const {visible, openModal, closeModal} = useModal()

    const state = reactive<{
      dateRange: ['', '']
      getTableDataSwitch: boolean
    }>({
      dateRange: ['', ''],
      getTableDataSwitch: false
    })

    const exportParam = reactive<{
      startTime: Dayjs
      endTime: Dayjs
    }>({
      startTime: dayjs(),
      endTime: dayjs()
    })

    function handleExport() {
      let devId = Number(route.query.devId as string | undefined)
      if (!isNaN(devId)) {
        let startTime = exportParam.startTime.format('YYYY-MM-DD 00:00:00')
        let endTime = exportParam.endTime.format('YYYY-MM-DD 23:59:59')
        let params = qs.stringify({
          devId,
          startTime,
          endTime
        })
        console.log(params)

        window.open(baseUrl + '/exc/exportCheckData?' + params, '_blank')
        closeModal()

        // exportCheckData({
        //   devId,
        //   startTime,
        //   endTime
        // })
        //   .then(res => {
        //     downFile(res.data, {})
        //     closeModal()
        //   })
        //   .catch(err => {
        //     if (err && err.msg) {
        //       message.error(err.msg)
        //     }
        //     closeModal()
        //   })
      }
    }

    // 记录类型
    const paramStatus = ref('')

    const tagCheckChange = (val: string, e: any) => {
      paramStatus.value = val
      emit('EditCurrentTypeCode', val)
      state.getTableDataSwitch = true
    }

    onMounted(() => {})

    return () => (
      <CCard
        title={`${props.waterOverview.checkData.checkDataName}历史记录`}
        class='bg-white mb-24'
      >
        <div class='mt-24 type_box'>
          <CnBoldSpan class='text-xText'>记录类型：</CnBoldSpan>
          {/* <CnNormalSpan class='ml-23 mr-19'>适宜</CnNormalSpan>
          <CnNormalSpan class='mr-19'>偏高</CnNormalSpan>
          <CnNormalSpan>偏低</CnNormalSpan> */}
          {/* <span>{props.typeList?.length}</span> */}
          <div class='tag_checked_box'>
            <a-checkable-tag
              checked={props.currentType == ''}
              onChange={(e: any) => {
                tagCheckChange('', e)
              }}
            >
              <CnNormalSpan>所有类型</CnNormalSpan>
            </a-checkable-tag>
            {props.typeList.map((tl, i) => (
              <a-checkable-tag
                class={`${props.currentType == tl.dictCode ? 'tags tag_' + tl.dictCode : ''}`}
                checked={props.currentType == tl.dictCode}
                onChange={(e: any) => {
                  tagCheckChange(tl.dictCode, e)
                }}
              >
                <CnNormalSpan>{tl.dictName}</CnNormalSpan>
              </a-checkable-tag>
            ))}
          </div>
        </div>
        <div class='mt-12 h-32 flex items-center'>
          <CnBoldSpan class='text-xText'>选择时间：</CnBoldSpan>

          <a-range-picker
            class='ml-16 bg-select'
            v-model={[state.dateRange, 'value']}
          ></a-range-picker>

          <div class='py-6 h-full mx-16'>
            <div
              class=' w-1 h-full'
              style={{
                backgroundColor: '#E5E6EB'
              }}
            ></div>
          </div>
          <a-button
            class='h-32 bg-primary flex items-center mr-16 gap-x-6'
            icon={<IconImg imgName='magnifying-glass' class='w-16 h-16 mr-8'></IconImg>}
            onClick={() => {
              console.log(state.dateRange)
              state.getTableDataSwitch = true
            }}
          >
            <CnNormalSpan class='text-white'>查询</CnNormalSpan>
          </a-button>

          <a-button
            class='h-32 bg-success flex items-center'
            icon={<i class='mr-8 iconfont icon-daochu text-16 text-white'></i>}
            onClick={openModal}
          >
            <CnNormalSpan class='text-white'>导出</CnNormalSpan>
          </a-button>
        </div>

        <ParamTable
          class='mt-21'
          id='paramTableCard'
          paramStatus={paramStatus.value}
          dateRange={state.dateRange}
          v-model={[state.getTableDataSwitch, 'lazy']}
        ></ParamTable>

        <a-modal
          title='导出所有参数的历史记录'
          v-model={[visible.value, 'visible']}
          onOk={handleExport}
          onCancel={closeModal}
        >
          <div class='p-24'>
            <a-form-item label='开始时间：'>
              <a-date-picker class='w-full' v-model={[exportParam.startTime, 'value']} />
            </a-form-item>
            <a-form-item label='结束时间：'>
              <a-date-picker class='w-full' v-model={[exportParam.endTime, 'value']} />
            </a-form-item>
          </div>
        </a-modal>
      </CCard>
    )
  }
})
